<template>
  <div class="tech-counter">

    <div class="counter-body">
      <div class="number-display">
        <transition-group name="flip" tag="div" class="digits-wrapper">
          <div
            v-for="(digit, index) in displayDigits"
            :key="`${index}-${digit}`"
            class="digit-card"
          >
            <div class="digit-value">{{ digit }}</div>
          </div>
        </transition-group>
        <div class="counter-unit">人</div>
      </div>


    </div>
  </div>
</template>

<script>
export default {
  name: 'SimpleCounter',
  props: {
    count: {
      type: Number,
      required: true,
      default: 0
    }
  },
  data() {
    return {
      displayDigits: ['0'],
      updateTime: this.getCurrentTime(),
      currentDate: this.getCurrentDate()
    }
  },
  watch: {
    count: {
      immediate: true,
      handler(newVal) {
        this.updateDigits(newVal)
        this.updateTime = this.getCurrentTime()
      }
    }
  },
  methods: {
    updateDigits(newVal) {
      const numStr = String(newVal).padStart(6, '0')
      this.displayDigits = numStr.split('')
    },
    getCurrentTime() {
      const now = new Date()
      return now.toLocaleTimeString()
    },
    getCurrentDate() {
      const now = new Date()
      const options = { year: 'numeric', month: 'long', day: 'numeric' }
      return now.toLocaleDateString('zh-CN', options)
    }
  }
}
</script>

<style scoped>
.tech-counter {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  /*background: #ffffff;*/
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  color: #333;
}

.counter-header {
  padding: 20px 30px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
  border-bottom: 1px solid #e0e6ed;
}

.counter-title {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 5px;
}

.counter-date {
  font-size: 14px;
  color: #7f8c8d;
}

.counter-body {
  padding: 0px;
}

.number-display {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0;
}

.digits-wrapper {
  display: flex;
  gap: 8px;
}

.digit-card {
  width: 60px;
  height: 80px;
  background: #f8f9fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.05),
    0 4px 6px rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
}

.digit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3498db, #9b59b6);
}

.digit-value {
  font-size: 42px;
  font-weight: 700;
  color: #2c3e50;
}

.counter-unit {
  font-size: 24px;
  margin-left: 15px;
  color: #7f8c8d;
  font-weight: 500;
}

.counter-footer {
  margin-top: 20px;
  text-align: center;
}

.update-time {
  font-size: 14px;
  color: #95a5a6;
}

/* 数字变化动画 */
.flip-enter-active {
  animation: flip-in 0.5s ease-out;
}

.flip-leave-active {
  animation: flip-out 0.5s ease-in;
}

@keyframes flip-in {
  0% {
    transform: rotateX(90deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flip-out {
  0% {
    transform: rotateX(0deg);
    opacity: 1;
  }
  100% {
    transform: rotateX(-90deg);
    opacity: 0;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .tech-counter {
    border-radius: 12px;
  }

  .counter-header {
    padding: 15px 20px;
  }

  .counter-title {
    font-size: 20px;
  }

  .counter-body {
    padding: 20px;
  }

  .digit-card {
    width: 40px;
    height: 60px;
  }

  .digit-value {
    font-size: 32px;
  }

  .counter-unit {
    font-size: 20px;
  }
}
</style>
